<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/article_model.css"/>
    <link rel="stylesheet"
          href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>水下生物网</title>

</head>
<body>
<div id="mid">
    <!-- 文章内容区域 -->
    <div class="article">
        <h2 class="article-title">【极地动物科普】北极的神秘庞然大物</h2>
        <img src="../img/artical-img/格陵兰鲨鱼.png" alt="文章图片" class="article-image">
        <p>  北极有鱼，其名为格陵兰鲨鱼，格陵兰鲨鱼之大，约有2.4-4.8米长。这种鲨鱼同大白鲨一样凶猛。以海鸟、鱿鱼、甲壳类、软体动物、以及各种腐肉及内脏为主要食物，格陵兰鲨也被称为“海洋中的鳄鱼”。
            下面让我们一起走进北极，来了解一下这位“海洋中的鳄鱼”吧！</p>

        <i style="font-weight: bold; text-align: center; display: block;">~科普时间到~</i>

        <p>  作为北极最大的鱼类，格陵兰鲨鱼非常奇特。数百年来，它们主要生活在海洋深处，与其他一些冷血北极动物一样，它们是处在“慢节奏”生活的北极鱼类，它们在北极深海里移动得非常慢。它们是已知寿命最长的脊椎动物。
            像许多深海生物一样，人们对格陵兰鲨鱼的生物学知之甚少。它们在海洋中很少见，也很难研究，通常是拖网渔船作为副渔获物捕获的，有时是作为目标物种捕获的，虽然现在捕获上来的格陵兰鲨鱼数量比过去少了，但在过去，人类对其进行大量的捕杀，以获取格陵兰鲨鱼肝油作为灯燃料和润滑剂。</p>

        <p>  格陵兰鲨鱼奇特的地方有很多，但是有一点肯定很吸引大家哦！那就是大多数格陵兰鲨鱼的一只眼睛里都有一种寄生虫，这种寄生虫是一种与螃蟹和龙虾有关的桡足类甲壳类动物，称为 Ommatokoita elongata，但由于这种寄生虫所寄生的位置是在格陵兰鲨鱼的眼睛里，位置相对来说比较窄，所以寄生虫的形态很小。当格陵兰鲨鱼游动时，这种寄生虫的长身躯部分会向后移动，寄生时间久了会最终使格陵兰鲨鱼失明。但是这并没有对它造成太大的影响，因为它们也都是生活于海洋深处，那里是非常黑暗的，以至于失明对它们来说几乎没有什么区别。</p>

        <p>  本期的极地动物科普就到此结束了，如果你对极地风光、极地动物、极地趣味知识感兴趣，敬请关注“极地问题研究中心”网站吧~</p>


<!--        <ul>-->
<!--            <li>1.1 到2030年，在全球所有人口中消除极端贫困，极端贫困目前的衡量标准是每人每日生活费不足1.9美元每天</li>-->
<!--            <li>1.2 到2030年，按各国标准界定的陷入各种形式贫困的各年龄段男女和儿童至少减半</li>-->
<!--            <li>1.3 执行适合本国国情的全民社会保障制度和措施，包括最低标准，到2030年在较大程度上覆盖穷人和弱势群体</li>-->
<!--            <li>1.4-->
<!--                到2030年，确保所有男女，特别是穷人和弱势群体，享有平等获取经济资源的权利，享有基本服务，获得对土地和其他形式财产的所有权和控制权，继承遗产，获取自然资源、适当的新技术和包括小额信贷在内的金融服务-->
<!--            </li>-->
<!--            <li>1.5-->
<!--                到2030年，增强穷人和弱势群体的抵御灾害能力，降低其遭受极端天气事件和其他经济、社会、环境冲击和灾害的概率和易受影响程度-->
<!--            </li>-->
<!--            <li>1.A-->
<!--                确保从各种来源，包括通过加强发展合作充分调集资源，为发展中国家、特别是最不发达国家提供充足、可预见的手段以执行相关计划和政策，消除一切形式的贫困-->
<!--            </li>-->
<!--            <li>1.B-->
<!--                根据惠及贫困人口和顾及性别平等问题的发展战略，在国家、区域和国际层面制定合理的政策框架，支持加快对消贫行动的投资-->
<!--            </li>-->
<!--        </ul>-->
    </div>

    <!-- 新的评论框部分 -->
    <div class="comment-box-section">
        <textarea placeholder="写下你的看法吧~"></textarea>
        <button class="article" id="submitBtn">提交评论</button>
    </div>


    <!-- 评论区 -->
    <div class="comment-section" style="width: 50%; margin: 0 auto;">
        <!-- 这里会动态插入评论或提示 -->
    </div>
</div>
<div class="footer">
    <img src="../img/水下生物网3.0.png" id="logo2">
    <h6><i class="fa fa-phone" aria-hidden="true"></i>&nbsp;技术支持：18375858944</h6>
    <h6><i class="fa fa-phone" aria-hidden="true"></i>&nbsp;专业指导：18375858944</h6>
    <h6><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp;邮箱：2065093677@qq.com</h6>
    <h6><i class="fa fa-address-book" aria-hidden="true"></i>&nbsp;地址：南京市玄武区孝陵卫街道南京理工大学</h6>
    <hr/>
</div>
<script src="../js/header.js"></script>
<script type="text/javascript" src="../js/javascript.js"></script>
<script type="text/javascript" src="../js/article_model.js"></script>

<script>

    $(document).ready(function() {

        // 为新加入点赞按钮绑定监听器
        function bindLikeButtons() {
            // 获取所有的 replyBtn 按钮
            const likeBtns = document.querySelectorAll(".reply-btn");

            // 首先，解绑所有已绑定的事件
            likeBtns.forEach(btn => {
                if (btn._bound) {
                    btn.removeEventListener("click", btn._boundFunction);
                    btn._bound = false;
                }
            });

            // 为每个按钮添加事件监听器
            likeBtns.forEach(btn => {
                if (!btn._bound) { // 检查按钮是否已经绑定事件
                    btn._bound = true; // 标记此按钮已绑定事件

                    const boundFunction = () => {
                        const commentId = btn.closest('.comment').getAttribute('data-id');
                        console.log(commentId);
                        like(btn);
                    };

                    btn._boundFunction = boundFunction; // 保存绑定的函数引用，以便稍后解绑
                    btn.addEventListener("click", boundFunction);
                }
            });
        }


        // 绑定评论按钮的点击事件
        const submitBtn = document.getElementById("submitBtn");
        submitBtn.addEventListener("click", () => {
            // console.log("点击了注册按钮，进行注册");
            submit()
        });

        // 获取所有评论
        fetchComments();

        // 获取所有评论
        function fetchComments() {
            $.ajax({
                url: "/comments/1",
                type: "GET",
                success: function(response) {
                    displayComments(response.data);
                    bindLikeButtons(); // 为新加入的点赞按钮绑定事件监听器
                },
                error: function(error) {
                    console.error("获取评论失败", error);
                }
            });
        }

        // 展示所有评论
        let isInitialized = false; // 标志，表示是否已经初始化过
        let sort_type = "likes";
        function displayComments(comments) {
            const commentSection = $(".comment-section");
            commentSection.empty(); // 清空评论区，避免重复

            console.log(comments)

            if (comments.length === 0) {
                commentSection.html(`
                    <div class="no-comments">
                        <p>还没有评论，发表第一个评论吧</p>
                    </div>
                `);
            } else {
                const tmp_commentDiv =
                    `<div class="comment-sort" style="display:flex; justify-content: space-between; align-items: center;">
                     <div>
                        <span id="comment-count">总评论数：${comments.length}</span>
                     </div>
                     <div>
                       <button id="defaultBtn" class="default-btn" data-sort-type="likes">默认</button>
                       <button id="newestBtn" class="newest-btn" data-sort-type="newest">最新</button>
                    </div>
                </div>`;
                commentSection.append(tmp_commentDiv);
                comments.forEach(comment => {
                    const commentDiv = `
                        <div class="comment" data-id=${comment.id}>
                            <div class="avatar-container"><span class="avatar-content">${comment.name[comment.name.length - 1]}</span></div>
                            <div class="comment-details">
                                <p class="comment-author">${comment.name}</p>
                                <p class="comment-content">${comment.content}</p>
                                <p class="comment-time">${comment.createTime[0]}/${comment.createTime[1]}/${comment.createTime[2]} ${comment.createTime[3]}:${comment.createTime[4]}</p>
                                <div class="reply-container">
                                    <span class="reply-icon">👍</span>
                                    <button class="reply-btn" id="replyBtn-${comment.id}">${comment.likes}</button>
                                </div>
                                <div class="reply-box">
                                    <textarea placeholder="回复${comment.name}..."></textarea>
                                    <button>提交回复</button>
                                </div>
                            </div>
                        </div>
                    `;
                    commentSection.append(commentDiv);
                });

                // 绑定默认和最新按钮
                const defaultBtn = document.getElementById("defaultBtn");
                const newestBtn = document.getElementById("newestBtn");

                function handleBtnClick(event) {
                    if (event.target.classList.contains("active")) {
                        return;
                    }
                    console.log("???");
                    // 移除所有按钮的活动状态
                    defaultBtn.classList.remove("active");
                    newestBtn.classList.remove("active");

                    // 设置点击的按钮为活动状态
                    event.target.classList.add("active");

                    // 获取排序方式
                    const sortType = event.target.getAttribute('data-sort-type');
                    sort_type = sortType;
                    // 发起 AJAX 请求
                    $.ajax({
                        url: "/sortComments/1",
                        type: "POST",
                        data: {
                            sortType: sortType
                        },
                        success: function(response) {
                            displayComments(response.data); // 返回排序后的评论数据
                            bindLikeButtons();
                        },
                        error: function(error) {
                            console.error("排序请求失败", error);
                        }
                    });
                }

                if (!isInitialized) {
                    defaultBtn.classList.add("active");
                    isInitialized = true; // 设置为已初始化
                } else if (sort_type === "likes") {
                    defaultBtn.classList.add("active");
                    newestBtn.classList.remove("active");
                } else if (sort_type === "newest") {
                    defaultBtn.classList.remove("active");
                    newestBtn.classList.add("active");
                }
                defaultBtn.addEventListener("click", handleBtnClick);
                newestBtn.addEventListener("click", handleBtnClick);
            }
        }

        // 添加评论
        const submit = () => {
            const commentContent = $(".comment-box-section textarea").val();
            const userId = sessionStorage.getItem("id");

            if (!userId) {
                alert("评论前请先登录!");
                return; // 直接退出函数
            }

            if (commentContent.trim() !== "") {
                $.ajax({
                    url: "/addComment/1",
                    type: "POST",
                    data: {
                        content: commentContent,
                        userId: userId
                    },
                    success: function() {
                        fetchComments(); // 重新获取评论并显示
                        $(".comment-box-section textarea").val(""); // 清空评论框
                    },
                    error: function(error) {
                        console.error("添加评论错误", error);
                    }
                });
            }
        }

        // 点赞
        const like = (currentBtn) => {
            const commentId = currentBtn.closest('.comment').getAttribute('data-id');

            $.ajax({
                url: "/addLikes/1",
                type: "POST",
                data: {
                    id: commentId,
                },
                success: function(response) {
                    if (response.code !== 200) {
                        if (response.msg === "用户未登录") {
                            logout()
                            // window.location.href = '../login.html'
                        }
                        message.error(response.msg)
                    } else {
                        message.success(response.msg)
                        const likesCount = parseInt(currentBtn.textContent, 10);
                        currentBtn.textContent = 1 + likesCount;
                    }
                },
            })
        }
    });
</script>

</body>
</html>
